<template>
  <section class="QuickStamp__container">
    <div class="circle_out" :class="circle_out_clazz">
      <div class="circle_in" :class="circle_in_clazz">
        <div class="text" :class="text_clazz">{{ label }}</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "非常好",
    },
    type: {
      type: String,
      default: "primary",
    },
  },

  computed: {
    circle_out_clazz() {
      switch (this.type) {
        case "primary":
          return "primary-solid__color";
        case "danger":
          return "danger-solid__color";
        case "info":
          return "info-solid__color";
        case "warning":
          return "warning-solid__color";
        case "success":
          return "success-solid__color";
      }
    },

    circle_in_clazz() {
      switch (this.type) {
        case "primary":
          return "primary-dashed__color";
        case "danger":
          return "danger-dashed__color";
        case "info":
          return "info-dashed__color";
        case "success":
          return "success-dashed__color";
      }
    },

    text_clazz() {
      switch (this.type) {
        case "primary":
          return "primary-solid__color";
        case "danger":
          return "danger-solid__color";
        case "info":
          return "info-solid__color";
        case "warning":
          return "warning-solid__color";
        case "success":
          return "success-solid__color";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$primary-color: #409eff;
$danger-color: #f56c6c;
$info-color: #ebebeb;
$warning-color: #e6a23c;
$success-color: #67c23a;

.QuickStamp__container {
  .circle_out {
    opacity: 0.6;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-30deg);

    .circle_in {
      width: 70%;
      height: 70%;
      border-radius: 50%;

      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        position: absolute;
        z-index: 10;
        background: white;
        font-size: 1.5rem;
        border-radius: 2px;
        width: 55px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .primary-solid__color {
    border: 1px solid $primary-color;
    color: $primary-color;
  }

  .primary-dashed__color {
    border: 1px dashed $primary-color;
    color: $primary-color;
  }

  .danger-solid__color {
    border: 1px solid $danger-color;
    color: $danger-color;
  }

  .danger-dashed__color {
    border: 1px dashed $danger-color;
    color: $danger-color;
  }

  .info-solid__color {
    border: 1px solid $info-color;
    color: $info-color;
  }

  .info-dashed__color {
    border: 1px dashed $info-color;
    color: $info-color;
  }

  .warning-solid__color {
    border: 1px solid $warning-color;
    color: $warning-color;
  }

  .warning-dashed__color {
    border: 1px dashed $warning-color;
    color: $warning-color;
  }

  .success-solid__color {
    border: 1px solid $success-color;
    color: $success-color;
  }

  .success-dashed__color {
    border: 1px dashed $success-color;
    color: $success-color;
  }
}
</style>